<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" @leftClick="goBack" title="订单详情"></u-navbar>
		<!-- <view class="bg-tea-light flex align-center justify-start " style="padding: 5px;">
			<text class="margin-left-sm text-df">订单剩余</text>
			<text class="margin-lr-xs">
				<u-count-down :time="surplusTime" format="HH:mm:ss" autoStart="" millisecond
					@change="countDownonChange">
					<view class="time">
						<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}:</text>
						<text class="time__item">{{ timeData.minutes }}:</text>
						<text class="time__item">{{ timeData.seconds }}</text>
					</view>
				</u-count-down>
			</text>
		</view> -->
		<!-- <view class="padding-sm">
			<view></view>
		</view> -->
		<view class="margin-xs padding-sm bg-white">
			<text class="text-black text-bold ">{{orderInfo.RoomName}}</text>
			<view class="margin-top-xs">
				<text class="text-gray text-sm">{{orderInfo.StoreInfo.Address}}</text>
				<text @click="gotoLoaction()" style="text-decoration: underline;color: #5D7BAA;"
					class=" text-sm margin-left-sm">查看地图</text>
			</view>
			<view class="margin-top-sm padding-lg flex align-center justify-between bg-tea-light">
				<view class="flex flex-direction align-center">
					<view class="text-lg text-bold">{{$u.timeFormat(orderInfo.StartTime, 'hh:MM')}}</view>
					<view class="text-xs margin-top-xs">{{$u.timeFormat(orderInfo.StartTime, 'yyyy-mm-dd')}}</view>
				</view>
				<view class="flex flex-direction align-center">
					<text class="text-xs">共{{allHour}}小时</text>
					<text>------------------------</text>
				</view>
				<view class="flex flex-direction align-center">
					<view class="text-lg text-bold">{{$u.timeFormat(orderInfo.EndTime, 'hh:MM')}}</view>
					<view class="text-xs margin-top-xs">{{$u.timeFormat(orderInfo.EndTime, 'yyyy-mm-dd')}}</view>
				</view>
			</view>
			<!-- <view class="margin-top-sm">
				<text class="text-sm text-gray ">支付方式</text>
				<text class="text-sm margin-left-sm text-black " style="font-weight: 550;">余额支付</text>
			</view> -->
			<view class="margin-top-sm">
				<text class="text-sm text-gray">订单总额</text>
				<text class="text-sm margin-left-sm text-black" style="font-weight: 550;">{{allPay}}元</text>
			</view>
			<view class="margin-top-xs">
				<text class="text-sm text-gray">下单时间</text>
				<text class="text-sm margin-left-sm text-black"
					style="font-weight: 550;">{{$u.timeFormat(orderInfo.CreateTime, 'yyyy-mm-dd hh:MM')}}</text>
			</view>
		</view>

		<view class="margin-xs padding-sm bg-white">
			<view v-show="showWifi" class="bg-gray margin-top-xs padding  flex align-center">
				<view style="width: 70%;" class="flex align-center">
					<text class="cuIcon-wifi text-black text-bold"></text>
					<text class="margin-left-lg text-black text-bold">{{wifiInfo.Name}}</text>
				</view>
				<view style="width: 30%;" class="flex align-center justify-between">
					<view style="height: 30rpx;width: 2rpx;background-color: #cacaca;"></view>
					<text @click="copyWifiPassword" style="color: #9f9f9f;">复制密码</text>
				</view>
			</view>
			<view class="bg-gray margin-top-xs padding  flex align-center">
				<view style="width: 70%;" class="flex align-center">
					<text class="cuIcon-lock text-black text-bold"></text>
					<text class="margin-left-lg text-black text-bold">大门·门禁</text>
				</view>
				<view style="width: 30%;" class="flex align-center justify-between">
					<view style="height: 30rpx;width: 2rpx;background-color: #cacaca;"></view>
					<view @click="changeOpenDoor(0)"
						style="border: 1px solid #d48d2d;border-radius: 16rpx;padding: 8rpx 28rpx;"
						class="flex align-center justify-around">
						<text style="color: #d48d2d;">开门</text>
					</view>
				</view>
			</view>
			<view class="bg-gray margin-top-xs padding  flex align-center">
				<view style="width: 70%;" class="flex align-center">
					<text class="cuIcon-lock text-black text-bold"></text>
					<text class="margin-left-lg text-black text-bold">二楼·门禁</text>
				</view>
				<view style="width: 30%;" class="flex align-center justify-between">
					<view style="height: 30rpx;width: 2rpx;background-color: #cacaca;"></view>
					<view @click="changeOpenDoor(-1)"
						style="border: 1px solid #d48d2d;border-radius: 16rpx;padding: 8rpx 28rpx;"
						class="flex align-center justify-around">
						<text style="color: #d48d2d;">开门</text>
					</view>
				</view>
			</view>
			<view class="bg-gray margin-top-xs padding  flex align-center">
				<view style="width: 70%;" class="flex align-center">
					<text class="cuIcon-lock text-black text-bold"></text>
					<text class="margin-left-lg text-black text-bold">智能门锁</text>
				</view>
				<view style="width: 30%;" class="flex align-center justify-between">
					<view style="height: 30rpx;width: 2rpx;background-color: #cacaca;"></view>
					<view @click="changeOpenDoor(1)"
						style="border: 1px solid #d48d2d;border-radius: 16rpx;padding: 8rpx 28rpx;"
						class="flex align-center justify-around">
						<text style="color: #d48d2d;">开门</text>
					</view>
				</view>
			</view>

		</view>

		<view class="margin-xs padding-sm bg-white " style="margin-bottom: 100upx;">
			<view class="flex align-center">
				<view style="height: 30rpx;width: 12rpx;background-color: #CCAC82;"></view>
				<text class="margin-left-xs text-black text-bold">温馨提示</text>
				<text class="margin-left-sm text-gray text-sm">Kind reminder</text>
			</view>
			<view class="margin-top">
				<view class="text-gray text-sm">1、预约时间段内，可自行控制房间门锁。</view>
				<view class="text-gray text-sm">2、预约结束后，电源会自动关闭。</view>
				<view class="text-gray text-sm">3、如要提前离开，请点击“离开门店”，方便我们知道您当前的最新状态。</view>
			</view>
		</view>

		<view v-show="false" class="margin-top-sm" style="height: 80vh;overflow: auto">
			<view v-for="(item,index) in detalis" :key="index" class="margin-sm padding-sm bg-white">
				<view class="flex align-center justify-between">
					<view>
						<view class="text-bold text-tea">{{item.IsRenew?'续费':'预约'}}</view>
						<view class="text-xs text-gray margin-top-xs">编号:{{item.Id}}</view>
					</view>
					<view class="text-sm text-bold">{{item.StateName}}</view>
				</view>
				<u-line dashed margin="10px 0px 10px 0"></u-line>
				<view class="grid-box">
					<view class=" padding-sm">
						<view class="text-bold">{{item.StartTime}}</view>
						<view class="text-xs text-gray margin-top-xs">开始时间</view>
					</view>
					<view class=" padding-sm">
						<view class="text-bold">{{item.EndTime}}</view>
						<view class="text-xs text-gray margin-top-xs">结束时间</view>
					</view>
					<view class=" padding-sm">
						<view class="text-bold">{{item.PayType==0?'微信支付':item.PayType==1?'账户支付':'其他支付'}}</view>
						<view class="text-xs text-gray margin-top-xs">支付方式</view>
					</view>
					<view class=" padding-sm">
						<view class="text-bold text-price">{{item.Money}}</view>
						<view class="text-xs text-gray margin-top-xs">支付金额</view>
					</view>
					<view v-show="item.State==1" style="grid-column-start:span 2;" class=" padding-sm">
						<view class="text-bold">{{item.PayTime}}</view>
						<view class="text-xs text-gray margin-top-xs">支付时间</view>
					</view>
					<view v-show="item.UserBuyPackage" style="grid-column-start:span 2;">
						<u-line dashed margin="0px 0px 10px 0"></u-line>
						<text class="text-blue text-sm padding-sm">本单使用了优惠券：{{item.UserBuyPackage.Title}}</text>
					</view>
					<view v-show="item.PayDownTime>0 && item.State==0" style="grid-column-start:span 2;">
						<view class="flex flex-direction  justify-start">
							<view class="flex margin-tb-xs">
								<text class="text-tea text-sm">支付倒计时：</text>
								<u-count-down :time="item.PayDownTime" format="mm:ss" @change="onChange($event,item)">
									<view class="time">
										<text class="text-tea text-sm">{{item.timeData.minutes}}&nbsp;分</text>
										<text class="text-tea text-sm">{{item.timeData.seconds}}&nbsp;秒</text>
									</view>
								</u-count-down>
							</view>
							<view class="flex">
								<button class="flex-treble cu-btn bg-tea" @click="btnPayAgain(item)">继续支付</button>
								<button class="flex-sub cu-btn bg-red cu-btn margin-left-xs"
									@click="cancelOrder(item)">取消</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-show="canRenew" style="position: fixed;bottom: 8rpx;left: 0px;width: 100%;">
			<view class="flex align-center justify-center margin-xs ">
				<button @click="renewOrder" class="cu-btn bg-tea radius" style="width: 100%;">续单</button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>

		<u-modal :showCancelButton="true" :show="showModal" title="操作提示" content='确认取消订单么？' @cancel="showModal=false"
			@confirm="conCanCelOrder">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				detalis: [],
				showModal: false, //
				changeOrderPayItem: {},
				canRenew: false,
				orderInfo: {},
				allHour: 0,
				allPay: 0,
				showWifi: false,
				wifiInfo: {},
				//surplusTime: 0,
				//timeData: {},
			}
		},
		onLoad(params) {
			this.orderId = params.id;
			this.getOrderDetalis();
			uni.$u.http.post('/Main/GetWifi').then(res => {
				this.wifiInfo = JSON.parse(res.data);
				this.showWifi = true;
			})
		},
		methods: {
			copyWifiPassword() {
				uni.setClipboardData({
					data: this.wifiInfo.PassWord,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '已复制到剪切板'
						})
					}
				});
			},
			changeOpenDoor(e) {
				uni.showLoading({
					title: '开锁中，请稍后'
				});
				uni.$u.http.post('/Customer/OpenDoor', {
					orderId: this.orderInfo.Id,
					index: e
				}).then(res => {
					//完成后再次查询门锁状态，
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				});
			},
			gotoLoaction() {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.orderInfo.StoreInfo.Lat),
					longitude: parseFloat(that.orderInfo.StoreInfo.Long),
					fail: function(err) {
						that.$refs.uToast.show({
							message: '导航失败！',
							type: 'error',
							position: 'top'
						});
					}
				})
			},
			//续单
			renewOrder() {
				uni.navigateTo({
					url: '/pagesA/order/reneworder?orderId=' + this.orderId
				})
			},
			cancelOrder(item) {
				this.changeOrderPayItem = item;
				this.showModal = true;
			},
			//确认取消订单
			conCanCelOrder() {
				this.showModal = false;
				uni.showLoading();
				uni.$u.http.post('/Customer/CanCelOrder', {
					orderPayId: this.changeOrderPayItem.Id
				}).then(res => {
					this.$refs.uToast.show({
						message: res.msg,
						type: 'success',
						postion: 'top'
					});
					this.getOrderDetalis();
				})
			},
			onChange(e, item) {
				item.timeData = e
			},
			goBack() {
				uni.navigateBack();
			},
			getOrderDetalis() {
				uni.showLoading();
				uni.$u.http.post('/Customer/GetOrderDetalis', {
					orderId: this.orderId
				}).then(res => {
					res.data.detalis.forEach(x => {
						x.timeData = {}
					});
					this.canRenew = res.data.canRenew; //此订单是否可以续费
					this.detalis = res.data.detalis;
					this.orderInfo = res.data.order;

					this.allPay = res.data.allPay;
					let cha = parseInt(Date.parse(this.orderInfo.EndTime) - Date.parse(this.orderInfo
							.StartTime)) /
						1000 / 60;
					this.allHour = parseFloat(cha / 60).toFixed(1);
					//this.surplusTime = parseInt(Date.parse(this.orderInfo.EndTime) - Date.parse(
					//	new Date())); //剩余倒计时
				});
			},
			btnPayAgain(item) {
				uni.showLoading();
				let that = this;
				uni.$u.http.post('/Customer/OrderPayAgain', {
					orderPayId: item.Id
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						signType: res.data.signType, //固定值
						paySign: res.data.paySign, //签名
						success: function(res) {
							//this.callBackPayResult();
							uni.showLoading({
								title: '支付结果查询中',
							})
							//that.timeIntervalId = setInterval(that.callBackPayResult, 3000);
						},
						fail: function(err) {
							console.log(err);
							that.$refs.uToast.show({
								message: '支付失败',
								type: 'error',
								position: 'top'
							});
						}
					});
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.grid-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		column-gap: 5px;
		row-gap: 5px;
	}

	// .time {
	// 	@include flex;
	// 	align-items: center;

	// 	&__item {
	// 		text-align: center;
	// 	}
	// }
</style>
